<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<style>
			/* 按顺序进行 过程 */
			/* .gone-enter-active,.gone-leave-actvie 进入行动*离开行动 */
			.gone-enter-active,.gone-leave-actvie{
				transition: 1s; /* 设置过渡时间 */
				/* 进入和离开设置了过渡时间 */
			}
			.gone-enter,.gone-leave-to{
				opacity: 0; /* 透明度 */
				/* 进入前 和 离开后设置了透明度 */
			}
			
			/* 按顺序进行 离开 行动 */
			.gone-leave{}
			.gone-leave-actvie{}
			.gone-leave-to{}
			
			/* 按顺序进行 进入 行动 */
			.gone-enter{}
			.gone-enter-active{}
			.gone-enter-to{}
			
			

		</style>

		<title>vue过渡动画</title>
		<div id="app">
			<button @click="change">击杀</button>
			<!-- <button>击杀</button> -->
			<transition name="gone">
				<!-- <p v-if="false">这是一个段落</p> -->
				<p v-if="show">测试1</p>
			</transition>
			
		<!-- 自动嗅探目标元素是否应用了css过渡或者动画 没有就自动执行命令  有就执行css动画 -->
			<!-- <!-- <p v-if="false">这是一个段落</p> -->
		<!-- 	<p v-if="show">测试1</p> -->

		</div>
	</head>
	<body>
		<script>
			new Vue({
				el:"#app",
				data:{
					show:true,//隐藏或者显示
				},
				methods:{
					change:function(){
						this.show=!this.show
					}
				}
			})
		</script>
	</body>
</html>
